<template>
  <div class="">
    <Alert type="info" show-icon>自定义图表不受全局图表主题与页面图表主题影响</Alert>
    <CustomJsDocument></CustomJsDocument>
    <Form :label-width="105">
      <FormItemPanel title="自定义脚本">
        <CodeEditor v-model="customJsCode"></CodeEditor>
      </FormItemPanel>
    </Form>
    <Alert v-if="ds_useTimer" show-icon :style="{padding: '8px 8px 8px 69px'}">
      <Checkbox class="m-t-5px m-b-5px" v-model="ds_autoRefresh">启用自动更新</Checkbox>
      <Icon type="md-time" slot="icon"></Icon>
      <template slot="desc">
        频率：<InputNumber size="small" :max="10000" :min="1" v-model="ds_autoRefreshDuration" style="width: 70px;"></InputNumber> 秒一次
      </template>
    </Alert>
  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'CustomChartCompForm',
    mixins: [FuncCompFormMixin],
    data() {
      return {

      }
    },
    mounted() {

    },
    methods: {

    },
    computed: {
      ...mapFields({
        customJsCode: 'component.compConfigData.customJsCode',

        ds_useTimer: 'component.compConfigData.ds_useTimer',
        ds_autoRefresh: 'component.compConfigData.ds_autoRefresh',
        ds_autoRefreshDuration: 'component.compConfigData.ds_autoRefreshDuration',

      })
    }
  }
</script>

<style scoped>

</style>
